<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib prefix="tag" tagdir="/WEB-INF/tags"%>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>自慰ったー</title>
  <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="js/jgcharts.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}

div {
	text-align: center;
	margin: 20 auto;
}

a img {
	border-style: none;
}

#border {
	border-style: solid;
}

#logo {
	padding-top: 100px;
	margin: 20 auto;
}

dd {
	margin: 20 auto;
	padding: 0px 0;
}

dl {
	margin: 20 auto;
	padding: 0px 0;
}


#sperm {
	font-size:80px;
}

</style>
</head>
<body>
  <div>
    <h1 id="logo"><img src="./images/logo.png" alt="自慰ったー" /></h1>

    <tag:notloggedin>
      <div>
        ここは自慰ったー（オナったー）というウェブアプリケーションです。Twitter上にオナニー報告をポストすることができます。
      </div>
      <div>
        ご利用にはまず以下の認証ボタンを押してこのアプリケーションとTwitterを連携させてください。
      </div>
      <a href="signin">
        <img src="./images/Sign-in-with-Twitter-darker.png" alt="OAuth認証する" />
      </a>
    </tag:notloggedin>

    <tag:loggedin>
      <div>このサイトで報告された排出精子総量（1回 ${spermConst}ccとして算出）</div>
      <div id = "sperm">${ spermSum } cc</div>

      <!-- 射精グラフ -->
      <div id="sperm_graph"></div>

      <div>オナニー報告するボタンを押すとあなたのタイムラインにあなたの発言としてオナニー報告がポストされます。（以下、ポスト例）</div>

      <div><img id="border" src="./images/example.JPG" alt="投稿例" /></div>
      <form action="./post" method="post">
        <div><input type="submit" name="post" value="オナニー報告する！" /></div>
      </form>
      <div><a href="./logout">ログアウトする</a></div>
    </tag:loggedin>
  </div>
</body>
<script type="text/javascript">
<%-- session変数をロード --%>
<% int[] masturbationCounts = (int[])request.getSession().getAttribute("masturbationCounts"); %>
<% String[] spermGraphAxisLabels = (String[])request.getSession().getAttribute("spermGraphAxisLabels"); %>
// 射精グラフ描画
var date = new Date('${ beginningDate }');
var api = new jGCharts.Api();
var data = [];			// FIXME: javaで配列joinして "[n,n,n]" て文字列にできたらいいのに
<% for (int n : masturbationCounts) { %>
data.push(<%= n %>);
<% } %>
var axis_labels = [];	// FIXME: ここも
<% for (String d : spermGraphAxisLabels) { %>
axis_labels.push('<%= d %>');
<% } %>

var opt = {
	data:data,
	axis_labels:axis_labels,
	type: 'lc'
};
jQuery('<img>')
	.attr('src', api.make(opt))
	.appendTo("#sperm_graph");
</script>
</html>
